<template>
    <div>
        <header>
            <div class="header_main">
                <!--                logo-->
                <img src="http://course.myhope365.com/img/logo-header.08ec1297.png" alt="">
                <!-- 头部导航 -->
                <ul class="header_main_nav" v-if="flag1">
                    <li><a href="#">
                        <router-link to="/index">首页</router-link>
                    </a></li>
                    <li class="header_list_li">
                        <!--                        <a href="#" class="header_list_a">-->
                        <!--                            课程分类-->
                        <!--                        </a>-->
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <a href="">课程分类</a><i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,index) in headerList" :key="index">
                                    {{item.subjectTitle}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                    <li><a href="#">专属课程</a></li>
                </ul>
                <!--                搜索框-->
                <p :class="[flag1==true?'header_search':'header_search2']">
                    <input type="text" name="" id="" placeholder="搜索课程" class="header_search_input">
                    <button class="header_search_btn"><img src="../images/搜索.png" alt=""><span>搜索</span></button>
                </p>
                <!-- 右侧购物车以及个人 -->
                <div class="header_car_person">
                    <div class="header_car_person_s">
                    <span class="buyCar">
                        <a href="#"><img src="../images/购物车空.png" alt=""></a>
                    </span>
                        <span class="header_line"></span>
                        <span class="header_name" v-if="$store.state.flag2==false">
                            <a href="#" class="logInBtn" @click="goLogin">登录/注册 &nbsp;</a>
                        <a href="#" class="personal_img"><img src="../images/个人_fill.png" alt=""></a>
                    </span>
                        <span class="header_name" v-if="$store.state.flag2">
                            <el-dropdown>
                            <span class="el-dropdown-link">
                                <a href="#" class="logInBtn">{{this.$store.state.personalName}} &nbsp;</a>
                                <a href="#" class="personal_img"><img :src="$store.state.personalHeaderImgBig" alt=""></a>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><router-link to="/personal" class="personalCenter">个人中心</router-link></el-dropdown-item>
                                <el-dropdown-item class="personalCenter">我的课程</el-dropdown-item>
                                <el-dropdown-item class="personalCenter">我的订单</el-dropdown-item>
                                <div @click="exitLogin"><el-dropdown-item class="personalCenter">退出登录</el-dropdown-item></div>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>

                    </div>
                </div>

            </div>

        </header>
        <login :goToLogin="goToLogin"></login>
    </div>
</template>

<script>
    import login from './login'
    import {exitLogin, personalModel} from "../../api/login";

    export default {
        name: "HeaderTitle",
        components: {
            login
        },
        data() {
            return {
                flag1: null,
                headerList: [],
                goToLogin: false,
                // flag2: null
            }
        },
        methods: {
            goLogin() {
                this.goToLogin = !this.goToLogin
            },
            exitLogin(){
                exitLogin().then(res=>{
                    console.log(res)
                    if (res.code==0){
                        this.$store.state.flag2=false
                        window.location.href="/index"
                    }
                })
            }
        },
        props: {
            flagIndex: String,
            // flagCourse: String
        },
        created() {
            // this.flag1 = this.flag
            // console.log(Boolean(this.flagIndex))
            this.flag1 = Boolean(!this.flagIndex)
            //     this.flag2 = Boolean(this.$store.state.flag2)
            // // console.log(this.$store.state.flag2)

            this.axios.post("http://wkt.myhope365.com/weChat/applet/subject/list", {"enable": 1}).then(res => {
                // console.log(res.data.rows)
                this.headerList = res.data.rows
            })

            personalModel().then(res=>{
                // console.log(res.userInfo.avatarUrl)
                if (res.code==0) {
                    console.log(1111111111)
                    this.$store.commit("changePersonalName",res.userInfo.nickname)
                    this.$store.commit("changePersonalPhnoe",res.userInfo.mobile)
                    this.$store.commit("changeHeaderImgBig",res.userInfo.avatarUrl)
                    this.$store.commit("changeHeaderImgBig",res.userInfo.avatarUrl)
                }
                console.log(this.$store.state.flag2)
            })

        }
    }


</script>

<style scoped>
    * {
        list-style: none;
        /*background-color: #fff;*/
    }
    /deep/ .personalCenter:hover {
        color: #23db9b !important;
    }

    .personalCenter {
        text-decoration: none;
        color: #333;
    }
    .header {
        height: 80px;
        border-bottom: 1px solid #f2f2f2;
    }

    .header_main {
        margin: auto;
        height: 80px;
        width: 1200px;
        /*background-color: #ccc;*/
    }

    /*头部图片logo*/
    .header_main > img {
        width: 180px;
        height: 55px;
        margin-top: 16px;
        float: left;
    }

    /*    头部导航栏*/
    .header_main_nav {
        margin: 30px 30px 0 40px;
        width: 268px;
        height: 30px;
        float: left;
    }

    .header_main_nav a {
        color: #333;
        text-decoration: none;
        font-size: 16px;
    }

    .header_main_nav > li {
        /* width: 32px; */
        margin-right: 30px;
        height: 24px;
        line-height: 24px;
        float: left;
    }

    .header_list_li {
        margin-right: 20px !important;
    }

    .header_main_nav a:hover {

        color: rgb(81, 190, 126);
    }

    .header_list_a {
        position: relative;
    }

    .header_main_nav_list {
        position: absolute;
        background-color: #fff;
        box-shadow: 2px 2px 5px #bbb;
    }

    .header_main_nav_list a,
    .header_car_person_list a {
        padding: 5px 12px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
    }

    .header_main_nav_list > li:hover,
    .header_car_person_list > li > a:hover {
        background-color: #e6fff3;
        color: rgb(81, 190, 126);
    }

    /* *****搜索框****** */
    .header_search {
        margin-top: 24px;
        margin-right: 6px;
        width: 400px;
        height: 38px;
        float: left;
    }

    .header_search2 {
        margin-left: 150px;
        margin-top: 24px;
        margin-right: 6px;
        width: 400px;
        height: 38px;
        float: left;
    }

    .header_search_input {
        padding: 6px 11px;
        width: 317px;
        height: 38px;
        border: 1px solid #d9d9d9;
        outline: none;
        border-radius: 19px 0 0 19px;
        box-sizing: border-box;
    }

    .header_search_input:hover {
        border: 1px solid rgb(81, 190, 126) !important;
    }

    .header_search_btn {
        width: 83px;
        height: 38px;
        border: 0;
        border-radius: 0 19px 19px 0;
        float: right;
        background-color: rgb(0, 207, 140);
    }

    .header_search_btn > span {
        margin-left: 5px;
        font-size: 16px;
        color: #fff;
    }

    /* ******购物车以及个人栏******* */
    .header_car_person {
        padding-top: 26px;
        margin-right: 80px;
        /* width: 95px; */
        height: 80px;
        float: right;
    }

    .header_car_person_s {
        /* width: 95px; */
        height: 35px;
        position: relative;
        line-height: 35px;
    }

    .header_line {
        position: absolute;
        height: 18px;
        width: 1px;
        background-color: #e8e8e8;
        left: 12px;
        top: 10px;
    }

    .header_name {
        display: inline-block;
        margin-left: 20px;
        height: 35px;
        line-height: 35px;
        position: relative;
    }

    .logInBtn {
        line-height: 35px;
        text-decoration: none;
        color: #333;
    }

    .header_name > a {
        text-decoration: none;
        color: #333;
    }

    .header_car_person_list {
        width: 80px;
        display: none;
        position: absolute;
        left: 10px;
        background-color: #fff;
        box-shadow: 2px 2px 5px #bbb;
    }

    .header_car_person_list a {
        text-decoration: none;
    }

    /*.personal_img {*/
    /*    display: inline-block;*/
    /*    overflow: hidden;*/
    /*    position: relative;*/
    /*}*/
    .personal_img > img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        position: absolute;
        top: 0px;
    }

    .buyCar {
        display: inline-block;
        margin-top: 10px;
        position: absolute;
        left: -15px;
        top: -5px;
    }

    /*.buyCar>a {*/
    /*    position: absolute;*/
    /*}*/
    /*.buyCar>a>img {*/
    /*    display: inline-block;*/
    /*    margin-top: 6px;*/
    /*}*/
</style>